<template>
  <div class="product-detail">
    <DetailNav ref="detailNavRef" class="detail-nav" :listBar="listBar" @clickLianDong="clickLianDong"/>
    <BScroll ref="bscroll" :probeType='3' @getPosition="getPosition">
      <detail-swiper :topImages="topImages"></detail-swiper>
      <detail-base-info :goods="goods" />
      <detail-shop-info :shop="shop" />
      <detail-param-info ref="paramsRef" :paramInfo="paramInfo" />
      <detail-goods-info :detailInfo="detailInfo" :getOffsetTop="getOffsetTop" :refresh="refresh" />
      <detail-comment-info ref="commentRef" :comment-info="commentInfo"/>
      <good-list ref="goodsRef" @getOffsetTop="getOffsetTop" :productList="recommendList" />
    </BScroll>

    <detail-bottom-bar @addToCart="addToCart" />
  </div>
</template>
<script>
import DetailNav from './childComponent/DetailNav'
import DetailSwiper from './childComponent/DetailSwiper'
import DetailBaseInfo from './childComponent/DetailBaseInfo'
import DetailShopInfo from './childComponent/DetailShopInfo'
import DetailGoodsInfo from './childComponent/DetailGoodsInfo'
import DetailCommentInfo from './childComponent/DetailCommentInfo'
import DetailParamInfo from './childComponent/DetailParamInfo'
import DetailBottomBar from './childComponent/DetailBottomBar'

import GoodList from 'components/content/productList/home-product-list'
import BScroll from 'components/common/bscroll/BScroll'
import { getProductDetail, getRecommend, Goods, Shop, GoodsParam, CartGoodsInfo } from 'api/product-detail'
export default {
  name: 'productDetail',
  data () {
    return {
      productId: '',
      listBar: [ '商品', '参数', '评论', '推荐' ],
      topImages: [], // 轮播图数据
      goods: {}, // 商品信息
      shop: {}, // 店铺信息
      detailInfo: {}, // 商品详细信息
      paramInfo: {}, // 参数信息
      commentInfo: {}, // 评论信息
      recommendList: [], // 推荐数据
      lianDongOffsetTop: []
    }
  },
  created () {

  },
  mounted () {
    this.productId = this.$route.query.productId
    this.getDetail(this.productId)
    // 获取之后可能会有bug，进行一次bscroll刷新
    this.$nextTick(() => {
      this.refresh()
      this.getOffsetTop()
    })
  },
  methods: {
    async getDetail (iid) {
      const res = await getProductDetail(iid)
      // console.log(res) // 商品详细数据
      // 2.1.获取结果
      const data = res.result

      // 2.2.获取顶部信息轮播图数据
      this.topImages = data.itemInfo.topImages

      // 2.3.获取商品信息
      this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)

      // 2.4.获取店铺信息
      this.shop = new Shop(data.shopInfo)

      // 2.5.获取商品信息
      this.detailInfo = data.detailInfo

      // 2.6.保存参数信息
      this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule)

      // 2.7.保存评论信息
      if (data.rate.list) {
        this.commentInfo = data.rate.list[0]
      }

      // 获取商品推荐数据
      const recommendResult = await getRecommend()
      this.recommendList = recommendResult.data.list

      this.$nextTick(() => {
        this.refresh()
      })
    },
    refresh () {
      this.$refs.bscroll.refresh()
    },
    // 获取  商品， 参数 ，评价， 推荐 对应的offsetTop
    getOffsetTop () {
      this.lianDongOffsetTop = []
      this.lianDongOffsetTop.push(0)
      this.lianDongOffsetTop.push(
        this.$refs.paramsRef &&
        this.$refs.paramsRef.$el &&
        this.$refs.paramsRef.$el.offsetTop
      )
      this.lianDongOffsetTop.push(
        this.$refs.commentRef &&
        this.$refs.commentRef.$el &&
        this.$refs.commentRef.$el.offsetTop
      )
      this.lianDongOffsetTop.push(
        this.$refs.goodsRef &&
        this.$refs.goodsRef.$el &&
        this.$refs.goodsRef.$el.offsetTop
      )
    },
    // 点击tab栏上的按钮进行联动效果。
    clickLianDong (index) {
      this.$refs.bscroll.goTop(0, -this.lianDongOffsetTop[index], 300)
    },
    // 监听滚动事件 -- 滚动数据，上面的tab对应变化。
    getPosition (y) {
      const arr = this.lianDongOffsetTop
      for (let i = 0; i < arr.length; i++) {
        if (-y > arr[arr.length - 1]) {
          this.$refs.detailNavRef.currentIndex = arr.length - 1
          return
          // arr[arr.length - 1]
        }
        if (-y > arr[i] && -y < arr[i + 1]) {
          this.$refs.detailNavRef.currentIndex = i
          // arr[i]
          return
        }
      }
    },
    // 添加购物车
    addToCart () {
      const cartItemInfo = new CartGoodsInfo(this)
      this.$store.dispatch('addCartList', cartItemInfo)
    }
  },
  components: {
    DetailNav,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfo,
    DetailCommentInfo,
    DetailGoodsInfo,
    DetailParamInfo,
    DetailBottomBar,
    GoodList,
    BScroll
  }
}
</script>
<style scoped>
/* @import ''; 引入css类 */
.detail-nav {
  background: #fff;
}
</style>
